<template>
  <div>
    <el-dialog
      v-model="visible"
      :title="title"
      width="1400px"
      append-to-body
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div class="flex justify-between">
        <el-card :style="{ width: form?.status !== '制单' ? '70%' : '100%' }">
          <el-form ref="formRef" :model="formData" :rules="rules" label-width="80px">
            <el-form-item label="编号" prop="code">
              <el-input v-model="formData.code" placeholder="自动生成" readonly />
            </el-form-item>
            <el-form-item label="所属部门" prop="deptId">
              <el-input v-model="formData.deptName" readonly />
            </el-form-item>
            <el-form-item label="申请事由" prop="reason">
              <el-input
                v-model="formData.reason"
                type="textarea"
                :rows="5"
                maxlength="250"
                show-word-limit
                placeholder="请输入申请事由"
                readonly
              />
            </el-form-item>
          </el-form>
        </el-card>
        <el-card v-if="form?.status !== '制单'" style="width: 29%">
          <el-form
            v-if="currentIndex === 0 && !isDetail"
            :model="auditingForm"
            ref="auditingFormRef"
            :rules="rules"
          >
            <el-form-item label="操作方式" prop="outcome">
              <el-select v-model="auditingForm.outcome">
                <el-option
                  v-for="item in reviewOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="审核意见" prop="disposalOpinions">
              <el-input
                class="mt-2"
                type="textarea"
                placeholder="请输入审核意见"
                v-model="auditingForm.disposalOpinions"
              />
            </el-form-item>
          </el-form>
          <el-scrollbar :style="{ height: currentIndex === 0 && !isDetail ? '370px' : '500px' }">
            <el-steps
              v-if="logList.length"
              direction="vertical"
              :active="logList.length"
              :space="150"
            >
              <el-step
                v-for="(item, index) in logList"
                :key="item.id"
                :title="item.nodeName"
                :icon="index === 0 ? Document : item.nodeName === '结束节点' ? CircleCheck : User"
                :status="item.status === '待处置' ? 'wait' : ''"
              >
                <template #description>
                  <div class="flex justify-between" style="width: 315px">
                    <div>操作：{{ item.operate }}</div>
                    <div>操作人：{{ item.assignName }}</div>
                  </div>
                  <div>任务开始时间：{{ item.taskCreateTime }}</div>
                  <div v-if="index !== 0">处置时间：{{ item.taskProcessTime }}</div>
                  <div v-if="index !== 0">审批意见：{{ item.disposalOpinions }}</div>
                </template>
              </el-step>
            </el-steps>
            <el-empty v-else :image-size="100" />
          </el-scrollbar>
        </el-card>
      </div>
      <template v-if="currentIndex === 0 && !isDetail" #footer>
        <div class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue';
  import { approvedReject, approvedSuccess } from '@/api/flowable/process-center';
  import modal from '@/plugins/modal';
  import { CircleCheck, User, Document } from '@element-plus/icons-vue';

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '查看表单',
    },
    formData: {
      type: Object,
      default: () => {},
    },
    currentIndex: {
      type: Number,
      default: () => 0,
    },
    logList: {
      type: Array,
      default: () => [],
    },
    isDetail: {
      type: Boolean,
      default: false,
    },
    taskId: {
      type: [String, Number],
    },
  });

  const emits = defineEmits(['update:modelValue', 'getList', 'getCountData']);
  const visible = computed({
    set(v) {
      emits('update:modelValue', v);
    },
    get() {
      return props.modelValue;
    },
  });

  const auditingFormRef = ref(null);
  const auditingForm = ref({
    disposalOpinions: null,
  });
  const reviewOptions = [
    { label: '通过', value: '0' },
    { label: '否决', value: '1' },
  ];

  function submitForm() {
    auditingFormRef.value.validate((valid) => {
      auditingForm.value.tbTaskId = props.taskId;
      if (valid) {
        if (auditingForm.value.outcome === '0') {
          approvedSuccess(auditingForm.value).then(() => {
            modal.msgSuccess('操作成功');
            visible.value = false;
            emits('getCountData');
            emits('getList');
          });
        } else {
          approvedReject(auditingForm.value).then(() => {
            modal.msgSuccess('操作成功');
            visible.value = false;
            emits('getCountData');
            emits('getList');
          });
        }
      }
    });
  }
</script>

<style scoped lang="scss"></style>
